

import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F9FAFB',
  },
  
  // 顶部导航栏
  header: {
    backgroundColor: '#FFFFFF',
    borderBottomWidth: 1,
    borderBottomColor: '#E5E7EB',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  
  headerTop: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  
  headerTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#1F2937',
  },
  
  headerActions: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  
  headerActionButton: {
    padding: 8,
  },
  
  // 搜索框
  searchContainer: {
    marginTop: 12,
  },
  
  searchInputWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#F9FAFB',
    borderWidth: 1,
    borderColor: '#E5E7EB',
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 12,
  },
  
  searchIcon: {
    marginRight: 8,
  },
  
  searchInput: {
    flex: 1,
    fontSize: 16,
    color: '#1F2937',
  },
  
  searchCloseButton: {
    padding: 4,
  },
  
  // 列表
  listContainer: {
    paddingBottom: 20,
  },
  
  listHeader: {
    height: 16,
  },
  
  // 审批列表项
  approvalItem: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    marginHorizontal: 16,
    marginBottom: 16,
    borderWidth: 1,
    borderColor: 'rgba(150, 159, 255, 0.1)',
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
      },
      android: {
        elevation: 2,
      },
    }),
  },
  
  approvalItemHeader: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  
  approvalItemInfo: {
    flex: 1,
    marginRight: 12,
  },
  
  approvalItemTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1F2937',
    marginBottom: 4,
  },
  
  approvalItemTime: {
    fontSize: 14,
    color: '#6B7280',
  },
  
  statusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  
  statusText: {
    fontSize: 12,
    fontWeight: '500',
    color: '#FFFFFF',
  },
  
  statusPending: {
    backgroundColor: '#FF6B6B',
  },
  
  statusProcessing: {
    backgroundColor: '#4ECDC4',
  },
  
  statusApproved: {
    backgroundColor: '#45B7D1',
  },
  
  statusRejected: {
    backgroundColor: '#FFA07A',
  },
  
  approvalItemFooter: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  
  approvalItemStatus: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  
  approvalItemDescription: {
    fontSize: 12,
    color: '#6B7280',
  },
  
  // 空状态
  emptyState: {
    backgroundColor: 'rgba(150, 159, 255, 0.05)',
    borderRadius: 12,
    padding: 32,
    marginHorizontal: 16,
    alignItems: 'center',
    marginTop: 60,
  },
  
  emptyStateIcon: {
    width: 64,
    height: 64,
    borderRadius: 32,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16,
  },
  
  emptyStateTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1F2937',
    marginBottom: 8,
  },
  
  emptyStateDescription: {
    fontSize: 14,
    color: '#6B7280',
    textAlign: 'center',
  },
  
  // 加载更多
  loadMoreContainer: {
    alignItems: 'center',
    paddingVertical: 24,
  },
  
  loadMoreButton: {
    paddingVertical: 8,
    paddingHorizontal: 16,
  },
  
  loadMoreText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#969FFF',
  },
  
  // 筛选模态框
  filterModalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  
  filterModalBackdrop: {
    flex: 1,
  },
  
  filterModalContent: {
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    padding: 24,
    maxHeight: '80%',
  },
  
  filterModalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 24,
  },
  
  filterModalTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1F2937',
  },
  
  filterModalCloseButton: {
    padding: 4,
  },
  
  filterSection: {
    marginBottom: 24,
  },
  
  filterSectionTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#1F2937',
    marginBottom: 12,
  },
  
  filterStatusContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  
  filterStatusButton: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: '#F3F4F6',
    borderRadius: 20,
  },
  
  filterStatusButtonActive: {
    backgroundColor: '#969FFF',
  },
  
  filterStatusButtonText: {
    fontSize: 14,
    color: '#6B7280',
  },
  
  filterStatusButtonTextActive: {
    color: '#FFFFFF',
    fontWeight: '500',
  },
  
  filterSortContainer: {
    gap: 12,
  },
  
  filterSortItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  
  filterSortRadio: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#969FFF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  filterSortRadioInner: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: '#969FFF',
  },
  
  filterSortLabel: {
    fontSize: 14,
    color: '#1F2937',
  },
  
  filterApplyButton: {
    marginTop: 8,
  },
  
  filterApplyButtonGradient: {
    paddingVertical: 12,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  filterApplyButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#FFFFFF',
  },
});

